<%--
  Created by IntelliJ IDEA.
  User: Astros
  Date: 2024/10/22
  Time: 上午9:12
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - Astros</title>
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="container">
    <!-- 登录logo图 -->
    <div class="title">
        <h4>使用 Astros ID 官网注册</h4>
    </div>
    <!-- 登录选项 -->
    <div class="content">
        <form method="post" action="register" enctype="multipart/form-data">
            <ul class="conmmon-cotent">
                <!-- 个人头像 -->
                <li>
                    <label for="date">个人照片</label>
                    <div class="col-sm-6">
                        <input type="file" name="picture" onchange='change()' id="file"/>
                        <img src="" alt="" width="40" height="45" id='preview'/>
                    </div>
                </li>
                <!-- 手机号码 -->
                <li>
                    <div>
                        <span class="area">+86</span>
                        <label class="number">手机号</label>
                        <input type="text" class="phonenumber" name="telephone" id="telephone">
                    </div>
                </li>
                <!-- 密码 -->
                <li>
                    <div>
                        <label class="passwordtitle">密码</label>
                        <input type="password" class="password" name="password" id="password">
                        <span class="eye"></span>
                    </div>
                </li>
                <!-- 用户名 -->
                <li>
                    <div>
                        <label class="passwordtitle">用户名</label>
                        <input type="text" class="phonenumber" name="username" id="username">
                    </div>
                </li>
                <!-- 姓名 -->
                <li>
                    <div>
                        <label class="passwordtitle">姓名</label>
                        <input type="text" class="phonenumber" name="name" id="name">
                    </div>
                </li>
                <!-- 邮箱 -->
                <li>
                    <div>
                        <label class="passwordtitle">邮箱</label>
                        <input type="text" class="phonenumber" name="email" id="email">
                    </div>
                </li>
                <!-- 出生日期 -->
                <li>
                    <div>
                        <span class="area">生日</span>
                        <input type="date" class="phonenumber" name="birthday" id="date">
                    </div>
                </li>
                <!-- 性别 -->
                <li>
                    <div>
                        <span class="area">性别</span>
                        <select class="phonenumber" name="sex" id="sex">
                            <option value="male">男</option>
                            <option value="female">女</option>
                        </select>
                    </div>
                </li>
            </ul>
            <!-- 注册按钮 -->
            <button class="btn" type="submit">注册</button>
        </form>
        <!-- 隐私政策 -->
        <div class="policy">
        <span>
          注册代表你已同意
          <a href="#">用户协议</a>
          和
          <a href="#">隐私政策</a>
        </span>
        </div>
    </div>
</div>
<script src="js/login.js"></script>
<script>
    function change() {
        var pic = document.getElementById("preview"),
            file = document.getElementById("file");
        var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
        // gif在IE浏览器暂时无法显示
        if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
            alert("图片的格式必须为png或者jpg或者jpeg格式！");
            file.value='';
            return;
        }
        var isIE = navigator.userAgent.match(/MSIE/)!= null,
            isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;
        if(isIE) {
            file.select();
            var reallocalpath = document.selection.createRange().text;
            // IE6浏览器设置img的src为本地路径可以直接显示图片
            if (isIE6) {
                pic.src = reallocalpath;
            }else {
                // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
                pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
                // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
                pic.src = '';
            }
        }else {
            html5Reader(file);
        }
    }
    function html5Reader(file){
        var file = file.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            var pic = document.getElementById("preview");
            pic.src=this.result;
        }
    }
</script>
</body>
</html>